/*==========  Desktop First Method  ==========*/

/*=====MOBILE MENU=====*/
.nav-trigger {
	width: 40px;
	height: 40px;
	background: #F1F1F1;
	border-radius: 50%;
	border: none;
	padding: 9px;
	cursor: pointer;
	left: 15px;
	display: none;
	align-items: center;
	justify-content: center;
}

.nav-trigger:focus {
  outline: 0;
}

.nav-trigger:hover span,
.nav-trigger:hover span:before,
.nav-trigger:hover span:after {
  background: var(--blue);
}

.nav-trigger span {
  display: block;
  position: relative;
}

.nav-trigger span:before,
.nav-trigger span:after {
  content: '';
  position: absolute;
  left: 0;
}

.nav-trigger span:before {
  top: -7px;
}

.nav-trigger span:after {
  bottom: -7px;
}

.nav-trigger span,
.nav-trigger span:before,
.nav-trigger span:after {
  width: 100%;
  height: 3px;
  background: var(--blue);
  -webkit-transition: all .4s ease;
  transition: all .4s ease;
}
.show-menu .nav-trigger span {
  background: transparent;
}
.show-menu .nav-trigger span:before {
  top: 0;
  -webkit-transform: rotate(225deg);
  transform: rotate(225deg);
}

.show-menu .nav-trigger span:after {
  bottom: 0;
  -webkit-transform: rotate(-225deg);
  transform: rotate(-225deg);
}
/*=====MOBILE MENU=====*/

/* Large Devices, Wide Screens */
@media only screen and (max-width : 1200px) {

}


/* Medium Devices, Desktops */
@media only screen and (max-width : 992px) {
	header {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 10;
		background: #fff;
		box-shadow: 0px 4px 25px rgba(0, 0, 0, 0.08);
	}
	body {
		padding-top: 60px;
	}
	.h-menu {
		position: absolute;
		top: 100%;
		right: -15px;
		max-width: 360px;
		width: 100%;
		height: calc(100vh - 60px);
		background: #FFFFFF;
		flex-direction: column;
		align-items: flex-start;
		z-index: 10;
		padding: 25px 0;
		transition: var(--ease);
		transform: translateX(100%);
	}
	.show-menu .h-menu {
		transform: none;
	}
	.h-menu li {
		display: block;
		width: 100%;
	}
	.h-menu li:not(:last-child) {
		margin-right: 0;
		border-bottom: 1px solid #efefef;
	}
	.h-menu li a {
		display: -webkit-flex;
		display: -moz-flex;
		display: -ms-flex;
		display: -o-flex;
		display: flex;
		align-items: center;
		min-height: 40px;
		padding: 5px 15px;
	}
	.logo {
		width: auto;
		height: auto;
		position: relative;
    background: none;
    color: var(--blue);
    margin-right: 15px;
	}
	.logo-place {
		display: none;
	}
	.logo__brand,
	.logo__name {
		line-height: 1;
	}
	.h-wrapper {
		min-height: 60px;
		padding-left: 0;
	}
	.h-call {
		display: none;
	}
	.nav-trigger {
		display: -webkit-flex;
		display: -moz-flex;
		display: -ms-flex;
		display: -o-flex;
		display: flex;
	}
	.banner__slider {
		display: none;
	}
	.banner__wrapper {
		padding-left: 0;
		display: -webkit-flex;
		display: -moz-flex;
		display: -ms-flex;
		display: -o-flex;
		display: flex;
		flex-direction: column-reverse;
	}
	.banner__content {
		margin-bottom: 40px;
	}
	.h-contacts {
		margin-right: 15px;
		margin-left: auto;
	}
	.h-phone i {
		height: 40px;
		width: 40px;
		margin: 0;
	}
	.h-phone span {
		display: none;
	}
	.scroll-to-top {
		bottom: 30px;
	}

}

/* Small Devices, Tablets */
@media only screen and (max-width : 768px) {
    .logo .desktop {
        display: none;
    }
    .logo img {
        max-height: 48px;
    }
	.block__title {
		font-size: 36px;
		margin-bottom: 32px;
	}
	.banner {
		display: block;
		padding-top: 48px;
	}
	.banner__wrapper {padding-left: 0;}
	.banner__list {
		margin-bottom: 0;
		display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    grid-gap: 16px 30px;
	}
	.banner__slider {
		display: none;
	}
	.banner .container-abs {
		position: relative;
		width: auto;
		margin-top: 40px;
	}
	.banner__btns {
		flex-direction: column;
	}
	.banner__btns .btn--second {
		margin-top: 1em;
	}
	.banner__btn2 {
		margin: 1em 0 0 0;
	}
	.form__wrapper {
    grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
	}
	.order__form {
		position: relative;
		margin-left: -15px;
		width: auto;
		margin-right: -15px;
		transform: none;
	}
	.order__form-2 .form__body,
	.form__body {
		padding: 30px 25px;
	}
	.form__list--three {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    grid-gap: 30px;
	}
	.form__actions {
		padding: 30px 0;
	}
	.form__actions .btn {
		font-size: 15px;
	}
	.order .container {
		position: relative;
	}
	.order__head {
		padding: 0 15px;
		margin-bottom: 85px;
	}

	.about {
		padding: 32px 0 32px;
	}
	.about__wrapper {
		grid-template-columns: 1fr;
	}
	.about__imgs {
		display: none;
	}
	.about__text p:not(:last-child) {
		margin-bottom: 1em;
	}
	.about__votes {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    grid-gap: 17px 10px;
	}
	.about__vote {
		width: 100%;
	}
	.about__right .block__title {
		margin-bottom: 32px;
	}
	.rooms {
		padding: 32px 0;
	}
	.rooms__headline .block__title {
		margin-bottom: 32px;
	}
	.rooms__block {
		display: -webkit-flex;
		display: -moz-flex;
		display: -ms-flex;
		display: -o-flex;
		display: flex;
		flex-direction: column;
	}
	.rooms__slider {
		padding-bottom: 50px;
		margin-bottom: 32px;
	}
	.rooms__nav {
		height: 50px;
		width: 100%;
	}
	.rooms__block:nth-child(odd) .rooms__nav {
		background: #fff;
	}
	.room__title {
		font-size: 20px;
	}
	.room__common {
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
	}
	.rooms__info {
		padding: 31px 20px;
	}
	.room__head {
		font-size: 15px;
	}
	.room__head h4:first-child {
		display: none;
	}
	.room__prop {
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    grid-gap: 10px;
  }
  .room__prop:not(:last-child) {
  	margin-bottom: 28px;
  }
  .services {
  	padding: 40px 0 80px;
  }
  .services__headline .block__title {
  	margin-bottom: 32px;
  }
  .services__list {
  	grid-gap: 45px 30px;
  }


  .around {
  	padding: 80px 0 80px;
  }
  .around__contacts {
  	flex-direction: column-reverse;
  	margin-right: -15px;
  	margin-left: -15px;
  }
  .around__map {
  	display: none;
  }
  .around__achieves {
    padding: 56px 15px 66px;
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
  }
  .around__achieve {
  	font-size: 15px;
  }
  .around__achieve:not(:last-child) {
  	margin-bottom: 16px;
  }
  .around__achieve span {
  	font-size: 32px;
  	width: 32px;
  }
  .around__map {
  	-ms-flex: 0 0 100%;
  	flex: 0 0 100%;
  	max-width: 100%;
  	height: 200px;
  }
  .around__list {
  	display: grid;
    grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
    grid-gap: 45px 30px;
  }
  .around__item {
  	text-align: center;
  	margin-left: auto;
  	margin-right: auto;
  }
  .around__icon {
  	margin-bottom: 16px;
  }
  .interior {
  	padding: 40px 0 80px;
  	margin-bottom: 0;
  }
	.interior::before {
		height: 100%;
	}
  .interior__headline {
    grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
    grid-gap: 30px 80px;
    margin-bottom: 40px;
  }
   .interior__headline  .block__title {
  	margin-bottom: 0;
  }
  .interior__slider {
  	margin-left: -15px;
  	margin-right: -15px;
  }
  .interior__slider .swiper-slide {
  	height: 250px;
  	width: 100%;
  }
  .interior__item {
  	width: 100%;
  	height: 250px;
  }
  .interior-nav {
  	width: 100%;
  	left: 0;
  }
	.order-2 {
		padding: 60px 0 48px;
	}
	.order-2 .order__head {
		margin-bottom: 0;
	}
	.whywe {
		padding: 32px 0;
	}

  .whywe__wrapper {
  	flex-direction: column-reverse;
	}
	.whywe::before {
		width: 100%;
	}
  .whywe__desc {
  	margin-left: -15px;
  	margin-right: -15px;
  	padding: 42px 15px 60px;
  }
  .whywe__desc h2 {
  	margin-bottom: 32px;
  }
  .whywe__list {
    grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  	padding-top: 40px;
  }
  .whywe__item {
  	margin-left: auto;
  	margin-right: auto;
  }

  .contacts {
  	padding: 40px 0 80px;
  }
  .contacts .block__title {
  	margin-bottom: 32px;
  }
  .contacts-wrapper iframe {
  	height: 250px;
  }
  .f-menu {
  	display: none;
  }
  .f-call {
  	display: none;
  }
  .f-phone {
  	margin-right: 0;
  	font-size: 15px;
  }
  .copy {
  	height: 40px;
  }
  #inputResult {
  	padding: 35px 20px;
  	font-size: 13px;
    line-height: 1.5;
  }
  #inputResult .ol {
  	padding-left: 0;
  	margin: .5rem 0 ;
  }
  #inputResult h4 {
  	font-size: 20px;
  }
  #inputResult h5 {
  	font-size: 18px;
  	line-height: 1.1;
  	margin-bottom: 0.25em;
  }
}
@media only screen and (max-width : 767px) {
	.contacts {
		padding-bottom: 0;
	}
	.contacts-container {
		display: flex;
		flex-direction: column;
	}
	.contacts-card {
		order: -1;
	}
	.contacts-iframe {
		position: relative;
		height: 250px;
		order: 1;
	}
}
/* Extra Small Devices, Phones */
@media only screen and (max-width : 450px) {
	.services__list {
		grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
	}
	.services__title {
		font-size: 16px;
		margin-bottom: 8px;
	}
	.services__text {
		font-size: 13px;
	}
	.whywe__list {
		width: 100%;
		grid-gap: 45px 30px;
		grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
	}
	.whywe__item .title {
		font-size: 16px;
		margin-bottom: 8px;
	}
	.whywe__item .info {
		font-size: 13px;
		font-weight: 400;
	}
	.around__title {
		margin-bottom: 16px;
	}
	.around__sub:not(:last-child) {
		margin-bottom: 12px;
	}
}

/* Custom, iPhone Retina */
@media only screen and (max-width : 320px) {

}


/*==========  Mobile First Method  ==========*/

/* Custom, iPhone Retina */
@media only screen and (min-width : 320px) {

}

/* Extra Small Devices, Phones */
@media only screen and (min-width : 480px) {

}

/* Small Devices, Tablets */
@media only screen and (min-width : 768px) {
    .logo .mobile {
        display: none;
    }
}

/* Medium Devices, Desktops */
@media only screen and (min-width : 992px) {

}

 /* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px) {

}